import { useEffect, useState } from 'react';
import http from '../../api/index'
import { useParams } from 'react-router-dom'
import Nabar from '../../conpoment/Nabar';
import style from './index.module.css'
import { Button } from 'antd-mobile'
import {LikeOutlined,StarOutlined} from '@ant-design/icons';
function Index() {
  const [list,setList]=useState<any>([])
  const {id}=useParams();
  const getData=async ()=>{
    const res=await http.get('/api/book/detail',{params:{id:id}})
    console.log(res.data.data);
    setList(res.data.data)
  }
  useEffect(()=>{
    getData()
  },[id])
  return (
    <div>
      <div>
        <Nabar title=' ' sticky={false} />
      </div>
      <div className={style.content}>
        <span className={style.title}>重要提示：本内容不能做为治疗依据，如果不合适请到医院进行科学治疗</span>
        {
          list.map((item:any,index:number)=>{
            return <div key={index}>
              <div className={style.box}>
                <p className={style.titles}>{item.texttitle}</p>
               <div className={style.doctor}>
                <img src={item.doctorimage} alt="" style={{width:'50px',height:'50px',borderRadius:'50%', objectFit: 'cover'}}/>
                <div>
                  <p className={style.name}>{item.doctorname}</p>
                <p>{item.nosocomium}</p>
                </div>
               </div>
              </div>
                <div className={style.text}>
                  <p>{item.doctordescword}</p>
                  <img src={item.socoimage} alt="" style={{width:'100%', height: '200px', objectFit: 'contain', textAlign:'center', background: '#f5f5f5'}} />
                  <p>{item.socodescword}</p>
                   <img src={item.doctorimage} alt="" style={{width:'100%', height: '200px', objectFit: 'contain', textAlign:'center', background: '#f5f5f5'}} />
                  <p style={{marginBottom:'20px'}}>{item.textdescword}</p>
                </div>
                <div className={style.bottom}>
                  <Button  shape='rounded' className={style.btn}><LikeOutlined />{item.textcount}</Button>
                   <Button shape='rounded' className={style.btn}><StarOutlined />{item.textdoctor}</Button>
                </div>
            </div>
          })
        }
      </div>
    </div>
  )
}

export default Index
